<template>
  <div class="container">
    <!-- 商品展示 -->
    <div class="shopping">
      <!-- 商品大图展示 -->
      <div class="s_l">
        <div class="b_img">
          <img :src="b_image" alt="商品大图" />
        </div>
        <!-- 商品小图展示 -->
        <div class="s_img" :style="{ width: s_Img_Width + 'px' }">
          <div
            :class="disableClick == 'left' ? 'disabledClick' : ''"
            v-if="array.length > 4"
            class="l_btn"
            @click="changeImageXL"
          >
            &lt;
          </div>
          <ul :style="s_img_css">
            <li
              :class="s_img_focus == item ? 'b_foucs' : ''"
              v-for="(item, index) of array"
              :key="index"
              @click="changeImage(item)"
            >
              <img :src="item" alt="" />
            </li>
          </ul>

          <div
            :class="disableClick == 'right' ? 'disabledClick' : ''"
            v-if="array.length > 4"
            class="r_btn"
            @click="changeImageXR"
          >
            &gt;
          </div>
        </div>
      </div>
      <!-- 商品信息展示 -->
      <div class="s_r">
        <h1>{{ goodsList.shopname }}</h1>
        <h2>￥{{ goodsList.price | handlePrice }}</h2>
        <div class="score">{{ sliceScore }}</div>
        <hr />
        <div class="text_over">
          {{ goodsList.desc }}
        </div>
        <div class="msg_issuer">
          <span>库存量：</span>
          {{ maxShoppNum }}
        </div>
        <div class="msg_issuer">
          <span>商家：</span>
          {{ orderName }}
        </div>
        <!-- <div @click="test()">发送</div> -->
        <div class="fun_d">
          <div class="fun">
            <div class="btn_jian" @click="changeDown">-</div>
            <input
              class="inp_num"
              ref="number"
              type="text"
              @change="changeNum"
              :value="shopp_num"
            />
            <div class="btn_jia" @click="changeUp">+</div>
          </div>
          <div class="btn_true" @click="shop()">加入购物车</div>
        </div>
      </div>
    </div>
    <!-- 为你推荐模块 -->
    <template>
      <like-details></like-details>
    </template>
  </div>
</template>

<script>
import LikeDetails from "@/components/Details/LikeDetails";
export default {
  name: "DeTails",
  components: { LikeDetails },
  data() {
    return {
      score: "★★★★★☆☆☆☆☆",
      shopp_num: 1,
      maxShoppNum: undefined,
      orderName: undefined,
      s_img_focus: "",
      b_image: "",
      array: [],
      translateX: 0,
      s_img_css: {},
      s_Img_Width: 0,
      disableClick: "left",
      goodsList: [],
    };
  },
  mounted() {
    //请求商品详情
    let shopid = this.$store.state.shopid;
    //获取商品库存
    this.$axios.get(`/tCash/selectbyshopid?shopid=${shopid}`).then((res) => {
      this.maxShoppNum = res.data.data[0].number;
    });
    //获取商品信息
    this.$axios
      .get("/tShop/searchByidAndstate", {
        params: {
          shopid,
        },
      })
      .then((res) => {
        this.goodsList = res.data.data[0];
        let merchantid = res.data.data[0].fkMerchantMerchantidShopShopid;
        //获取商家信息
        this.$axios
          .get(`/tMerchant/selectbyid?merchantid=${merchantid}`)
          .then((res) => {
            this.orderName = res.data.data.username;
          });
        this.b_image =
          "http://114.132.236.89:8888/static/" + res.data.data[0].maxohoto;
        this.array.push(
          "http://114.132.236.89:8888/static/" + res.data.data[0].minphoto
        );
        this.s_img_focus = this.array[0];
        // 动态绑定商品小图展示的盒子宽度
        this.array.length > 4
          ? (this.s_Img_Width = 430)
          : (this.s_Img_Width = `${this.array.length * 110 - 10}`);
        // 动态设置商品小图片展示的初始盒子宽度和过度效果
        this.s_img_css = {
          width: `${this.array.length * 100}%`,
          transform: `translateX(${this.translateX}px)`,
        };
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    changeImageXL() {
      if (this.disableClick == "left") return false;
      let minTranslateX = 0;
      if (this.translateX < minTranslateX) {
        this.translateX = this.translateX + 110;
        this.s_img_css.transform = `translateX(${this.translateX}px)`;
        if (this.translateX == minTranslateX) {
          this.disableClick = "left";
        }
      }
    },
    //添加商品
    shop() {
      if (this.$store.state.LoginStatus == 0) {
        this.$message({
          message: "请您先登录",
          duration: 2000,
          type: "warning",
        });
      } else {
        this.$store.state.userpurchase.push(this.$store.state.shopid);
        this.$store.state.usershopnum.push(this.shopp_num);
        this.$store.state.usershopprice.push(this.goodsList.price);
        this.$store.state.mecharId.push(this.goodsList.fkMerchantMerchantidShopShopid);
        this.$message({
          message: "成功加入商品至购物车",
          duration: 1200,
          type: "success",
        });
        this.$router.push("/shopping");
      }
    },
    changeImageXR() {
      if (this.disableClick == "right") return false;
      let maxTranslateX = -(this.array.length - 4) * 110;
      if (this.translateX > maxTranslateX) {
        this.translateX = this.translateX - 110;
        this.s_img_css.transform = `translateX(${this.translateX}px)`;
        if (this.translateX == maxTranslateX) {
          this.disableClick = "right";
        }
      }
    },
    changeImage(val) {
      this.s_img_focus = val;
      this.b_image = val;
    },
    changeNum() {
      if (this.$refs.number.value < 1) {
        this.$message({
          message: "不可以超过库存量，已自动设置为1件商品",
          duration: 2000,
          type: "warning",
        });
        this.shopp_num = 1;
        this.$refs.number.value = 1;
      } else if (this.$refs.number.value > this.maxShoppNum) {
        this.$message({
          message: "不可以超过库存量，已自动变为最大库存",
          duration: 2000,
          type: "warning",
        });
        this.shopp_num = this.maxShoppNum;
        this.$refs.number.value = this.maxShoppNum;
      } else {
        this.shopp_num = this.$refs.number.value;
      }
    },
    changeDown() {
      if (this.shopp_num <= 1) {
        this.$message({
          message: "最少加入一件商品",
          duration: 2000,
          type: "warning",
        });
        this.shopp_num = 1;
      } else {
        this.shopp_num--;
      }
    },
    changeUp() {
      if (this.shopp_num >= this.maxShoppNum) {
        this.$message({
          message: "不可以超过库存量",
          duration: 2000,
          type: "warning",
        });
        this.shopp_num = this.maxShoppNum;
      } else {
        this.shopp_num++;
      }
    },
  },
  computed: {
    sliceScore() {
      return this.score.slice(2, 7);
    },
  },
  filters: {
    handlePrice(val) {
      let value = Math.round(parseFloat(val) * 100) / 100;
      let xsd = value.toString().split(".");
      if (xsd.length == 1) {
        value = value.toString() + ".00";
        return value;
      }
      if (xsd.length > 1) {
        if (xsd[1].length < 2) {
          value = value.toString() + "0";
        }
        return value;
      }
      return value;
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.disabledClick {
  cursor: not-allowed !important;
  background-color: #505050 !important;
}
.b_foucs {
  border: 2px solid #266bf9 !important;
}
.container {
  width: 1200px;
  margin: 50px auto;
  .shopping {
    display: flex;
    .s_l {
      padding: 0 10px;
      flex: 1;
      .b_img {
        width: 568px;
        height: 568px;
        border: 2px solid #cccc;
        border-radius: 10px;
        line-height: 0;
        img {
          border-radius: 10px;
        }
      }
      .s_img {
        position: relative;
        width: 320px;
        height: 100px;
        margin: 20px auto 0;
        overflow: hidden;
        ul {
          transition: all 0.5s linear;
          li {
            float: left;
            margin-right: 10px;
            width: 100px;
            height: 100px;
            border: 2px solid #ccc;
            line-height: 0;
            transition: all 0.2s ease;
            border-radius: 10px;
            img {
              border-radius: 10px;
            }
            &:hover {
              border: 2px solid #266bf9;
            }
            &:last-of-type {
              margin-right: 0;
            }
          }
        }
        .l_btn {
          transition: all 0.3s ease;
          opacity: 0;
          position: absolute;
          top: 50%;
          left: -10px;
          z-index: 100;
          background-color: #4a4a4a;
          color: white;
          transform: translateY(-50%);
          border-radius: 5px;
          width: 30px;
          text-align: center;
          height: 30px;
          line-height: 30px;
          font-family: fangsong;
          cursor: pointer;
          &:hover {
            background-color: #266bf9;
          }
        }
        .r_btn {
          transition: all 0.3s ease;
          opacity: 0;
          position: absolute;
          top: 50%;
          right: -10px;
          z-index: 100;
          text-align: center;
          background-color: #4a4a4a;
          color: white;
          transform: translateY(-50%);
          border-radius: 5px;
          width: 30px;
          height: 30px;
          line-height: 30px;
          font-family: fangsong;
          cursor: pointer;
          &:hover {
            background-color: #266bf9;
          }
        }
        &:hover {
          .l_btn,
          .r_btn {
            opacity: 1;
            display: block;
          }
          .r_btn {
            right: 0;
          }
          .l_btn {
            left: 0;
          }
        }
      }
    }
    .s_r {
      flex: 1;
      margin-left: 20px;
      text-align: left;
      h1 {
        font-size: 36px;
        padding: 5px 0 15px 0;
      }
      h2 {
        font-size: 32px;
        padding: 5px 0 15px 0;
      }
      .score {
        font-size: 24px;
        padding: 10px 0 30px 0;
      }
      hr {
        border: none;
        height: 1px;
        background-color: #e1e1e1;
      }
      .text_over {
        padding: 25px 0;
        height: auto;
        font-size: 18px;
        line-height: 30px;
        max-height: 145px;
        display: -webkit-box;
        overflow: hidden; /*超出隐藏*/
        text-overflow: ellipsis; /*隐藏后添加省略号*/
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4; //想显示多少行
      }
      .msg_issuer {
        margin: 15px 0;
        font-size: 18px;
        span {
          color: #266bf9;
          font-weight: 500;
        }
      }
      .fun_d {
        display: flex;
        margin-top: 20px;
        .fun {
          border: 1px solid #ebebeb;
          display: inline-block;
          height: 50px;
          overflow: hidden;
          padding: 0;
          position: relative;
          width: 100px;
          background: #505050;
          border-radius: 5px;
          .btn_jian {
            width: 40px;
            height: 50px;
            line-height: 50px;
            position: absolute;
            left: 0;
            color: white;
            font-size: 16px;
            text-align: center;
            font-weight: 700;
            cursor: pointer;
          }
          .inp_num {
            position: absolute;
            left: 40px;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            color: white;
            width: 20px;
            outline: 0;
            background-color: transparent;
            border: none;
          }
          .btn_jia {
            cursor: pointer;
            width: 40px;
            height: 50px;
            line-height: 50px;
            position: absolute;
            right: 0;
            color: white;
            font-size: 16px;
            text-align: center;
            font-weight: 700;
          }
        }
        .btn_true {
          width: 190px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          font-size: 17px;
          color: white;
          background-color: #266bf9;
          font-weight: 500;
          border-radius: 5px;
          cursor: pointer;
          margin-left: 15px;
        }
      }
    }
  }
}
</style>
